<template>
  <div class="main">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/post' }"
          >旅游攻略</el-breadcrumb-item
        >
        <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 标题 -->
    <h1>{{ data.title }}</h1>

    <!-- 发表日期 -->
    <div class="post-info">
      <span>攻略: {{ data.city.created_at }} </span>
      <span>阅读：{{ data.watch }} </span>
    </div>

    <!-- 文章主体 -->
    <div class="post-content" v-html="`${data.content}`"></div>

    <!-- 评论和分享 -->
    <div class="post-ctrl">
      <el-row type="flex" justify="center">
        <div class="ctrl-item">
          <i class="iconfont iconpinglun"></i>
          <p>评论({{ commentData }})</p>
        </div>
        <div class="ctrl-item" @click="fenxiangClick">
          <i class="iconfont iconfenxiang"></i>
          <p>分享</p>
        </div>
      </el-row>
    </div>

    <!-- 评论组件 -->
    <commentPost />
  </div>
</template>

<script>
import commentPost from "../../components/post/commentPost";
export default {
  components: {
    commentPost
  },
  props: {
    data: {
      type: Object,
      // 默认是空数组
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      commentData: 0
    };
  },
  created() {
    this.$axios({
      url: "/posts/comments"
    }).then(res => {
      console.log(res.data);
      this.commentData = res.data.total;
    });
  },

  methods:{
    fenxiangClick(){
      this.$message.warning("暂不支持分享")
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 700px;

  h1 {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
  }
  .post-info {
    color: #999;
    padding: 20px;
    text-align: right;

    span {
      margin-left: 20px;
    }
  }
  .post-content {
    line-height: 1.5;
    /deep/ * {
      max-width: 700px !important;
    }
  }

  .post-ctrl {
    padding: 50px 0 30px;

    .ctrl-item {
      margin: 0 20px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;

      i {
        display: block;
        font-size: 28px;
        color: orange;
      }

      p {
        margin-top: 5px;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>
